<template>
  <div class="set-container">
    <div class="synthesis-container">
      <h3>合成</h3>
      <div class="content">
        <div class="item">
          <div class="title">语速：</div>
          <my-slider
            @getSliderValue="getSpeed"
            :setValue='form.speed'
            :beforeTxt="'慢'"
            :afterTxt="'快'">
          </my-slider>
        </div>
        <div class="item">
          <div class="title">音高：</div>
          <my-slider
            @getSliderValue="getPitch"
            :setValue='form.pitch'
            :beforeTxt="'低'"
            :afterTxt="'高'">
          </my-slider>
        </div>
        <div class="item">
          <div class="title">音量：</div>
          <my-slider
            @getSliderValue="getVolume"
            :setValue='form.volume'
            :beforeTxt="'低'"
            :afterTxt="'高'">
          </my-slider>
        </div>
        <div class="item"></div>
        <div class="item">
          <div class="title">主播：</div>
          <el-select v-model="form.anchor" placeholder="请选择声音">
            <el-option label="标准男音" value="man"></el-option>
            <el-option label="标准女音" value="woman"></el-option>
          </el-select>
        </div>
         <div class="item"></div>
      </div>
    </div>
    <div class="file-container">
      <button class="confirm-btn">确定</button>
      <h3>文件</h3>
      <div class="content">
        <div class="item">
          <div class="title">默认输出格式：</div>
          <el-select v-model="form.outFormat" placeholder="请选择输出格式">
            <el-option label="map3" value="mp3"></el-option>
            <el-option label="wav" value="wav"></el-option>
          </el-select>
        </div>
        <div class="item">
          <div class="title">默认输入格式：</div>
          <el-select v-model="form.inputFormat" placeholder="请选择输入格式">
            <el-option label="txt" value="txt"></el-option>
            <el-option label="jpg" value="jpg"></el-option>
          </el-select>
        </div>
        <div class="item">
          <div class="title">支持字符：</div>
          <el-checkbox-group v-model="form.chartList">
            <el-checkbox label="GBK"></el-checkbox>
            <el-checkbox label="GB2312"></el-checkbox>
            <el-checkbox label="GB18030"></el-checkbox>
            <el-checkbox label="UTF-8"></el-checkbox>
            <el-checkbox label="UNICODE"></el-checkbox>
            <el-checkbox label="BIG5"></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  @import '../../../assets/less/set';
</style>

<script>
import MySlider from '../../../components/MySlider'
export default {
  data () {
    return {
      form: {
        speed: 50,
        pitch: 30,
        volume: 20,
        anchor: '',
        outFormat: 'wav',
        inputFormat: 'txt',
        chartList: ['GBK', 'UTF-8']
      }
    }
  },
  components: {
    MySlider
  },
  methods: {
    getSpeed (val) {
      console.log(val)
    },
    getPitch (val) {

    },
    getVolume (val) {

    }
  }
}
</script>
